<template>
  <div class="allButton">
    <div class="allButton_left">
      <!-- lab卡 -->
      <div
        class="allButton_lab"
        v-show="labData.length"
      >
        <el-radio-group
          @change="onChange"
          v-model="labActive"
          style="margin-bottom: 30px"
        >
          <el-radio-button
            v-for="(lab, index) in labData"
            :key="index"
            :label="lab.value"
          >
            {{ lab.title }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <!-- 按钮 -->
      <!-- <el-button plain>其他</el-button> -->
      <div
        class="button-msg-box"
        v-for="(buttonMsg, index) in buttonData"
        :key="index"
      >
        <el-button
          v-if="buttonType.find((v) => v === buttonMsg.key)"
          @click="onButton(buttonMsg.key)"
          :plain="buttonMsg.plain"
          :icon="buttonMsg.icon"
          :type="buttonMsg.type"
          :ref="buttonMsg.key"
        >
          {{ buttonMsg.name }}
        </el-button>
      </div>
      <!-- 左侧边 -->
      <slot name="left" />
    </div>
    <div class="allButton_right">
      <div
        class="button-msg-box"
        v-for="(buttonMsg, index) in buttonDataRight"
        :key="index"
      >
        <el-button
          v-show="buttonType.find((v) => v === buttonMsg.key)"
          @click="onButton(buttonMsg.key)"
          :plain="buttonMsg.plain"
          :icon="buttonMsg.icon"
          :type="buttonMsg.type"
          :ref="buttonMsg.key"
        >
          {{ buttonMsg.name }}
        </el-button>
      </div>
      <!-- 右侧边 -->
      <slot name="right" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      levelList: null,
      labActive: '',
      buttonData: [
        {
          name: '新增',
          key: 'add',
          plain: true,
          type: 'success',
          icon: 'Plus',
        },
        {
          name: '导出',
          key: 'export',
          plain: true,
          type: 'warning',
          icon: 'DocumentCopy',
        },
        {
          name: '删除',
          key: 'delete',
          plain: true,
          type: 'danger',
          icon: 'DocumentDelete',
        },
        {
          name: '查询',
          key: 'query',
          plain: false,
          type: 'primary',
          icon: 'Search',
        },
      ],
      buttonDataRight: [
        {
          name: '重置',
          key: 'reset',
          plain: true,
          type: 'info',
          icon: 'RefreshRight',
        },
        {
          name: '刷新',
          key: 'refresh',
          plain: true,
          type: 'primary',
          icon: 'Refresh',
        },
      ],
    };
  },
  props: {
    // 按钮类别
    buttonType: {
      type: Array,
      default: () => {
        // 'add' 新增, 'delete' 删除/作废, 'query' 查询, 'refresh' 刷新, 'export' 导出, 'reset' 重置
        // eg :buttonType="['add', 'delete', 'query', 'refresh', 'export', 'reset']"
        return ['query', 'refresh', 'reset'];
      },
    },
    // lab选项卡
    labData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // lab选项卡-默认选中
    labIndex: {
      type: Number,
      default: 0,
    },
  },
  watch: {},
  created() {
    this.labActive = this.$props.labIndex;
  },
  mounted() {
    // console.log(this.$props, 'props')
  },
  methods: {
    // 选项卡点击
    onChange() {
      // console.log(this.labActive, 'this.labActive')

      this.$emit('labChange', this.labActive);
    },
    // 按钮点击
    onButton(data) {
      let emitName = `${data}Button`;
      // console.log(emitName, 'emitName')
      this.$emit(emitName, data);
      // 添加动画
      switch (data) {
        case 'query': {
          this.$refs[data][0].$el.children[0].classList.remove(
            'animationQuery'
          );
          setTimeout(() => {
            this.$refs[data][0].$el.children[0].classList.add('animationQuery');
          }, 100);
          break;
        }

        case 'delete':
        case 'export': {
          this.$refs[data][0].$el.children[0].classList.remove(
            'animationExport'
          );
          setTimeout(() => {
            this.$refs[data][0].$el.children[0].classList.add('animationExport');
          }, 100);
          break;
        }
        case 'reset': {
          this.$refs[data][0].$el.children[0].classList.remove(
            'animationReset'
          );
          setTimeout(() => {
            this.$refs[data][0].$el.children[0].classList.add('animationReset');
          }, 100);
          break;
        }
        case 'add':
        case 'refresh': {
          this.$refs[data][0].$el.children[0].classList.remove(
            'animationRotation'
          );
          setTimeout(() => {
            this.$refs[data][0]?.$el.children[0].classList.add(
              'animationRotation'
            );
          }, 100);
          break;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.allButton {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  height: 32px;
  .allButton_left,
  .allButton_right {
    overflow: hidden;
    height: 32px;
    display: flex;
  }
  .allButton_lab {
    margin-right: 18px;
  }
  ::v-deep .button-msg-box {
    .el-button {
      margin-right: 10px;
    }

    &:last-child {
      .el-button {
        margin-right: 0px;
      }
    }
    // css3动画
    .animationRotation {
      transition: all 0.5s;
      transform: rotate(-180deg);
    }
    .animationReset {
      transition: all 0.5s;
      transform: rotate(360deg);
    }
    .animationQuery {
      animation: animaQuery 0.2s;
      -webkit-animation: animaQuery 0.2s; /* Safari 和 Chrome */
      // transition: all 0.5s;
      // transform: scale(1.5);
    }
    .animationExport {
      animation: animaExport 0.4s;
      -webkit-animation: animaExport 0.4s; /* Safari 和 Chrome */
    }
  }
}
@keyframes animaQuery {
  0% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@-webkit-keyframes animaQuery /*Safari and Chrome*/ {
  0% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes animaExport {
  0% {
    transform: scale(1);
  }
  60% {
    transform: translate(0%, -300%);
  }
  61% {
    transform: translate(0%, 300%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}

@-webkit-keyframes animaExport /*Safari and Chrome*/ {
  0% {
    transform: scale(1);
  }
  60% {
    transform: translate(0%, -300%);
  }
  61% {
    transform: translate(0%, 300%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}

</style>
